<template>
	<view class="register-detail">
		<view class="register-detail-header">
			<view class="register-detail-title flexR">
				<view class="icon"><u-icon name="checkmark"></u-icon></view>
				{{params.jlzt|transStatus}}
			</view>
			<view class="font12">
				{{params.jlzt|transStatusName}}
			</view>
		</view>
		<view class="div-cut" v-if="params.jlzt!=='0'&&params.jlzt!='2'"></view>
		<view class="register-detail-code" v-if="params.jlzt!=='0'&&params.jlzt!='2'">
			<u-section title="就诊条码" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
			<view class="register-detail-component-code">
				<tki-barcode
					ref="barcode"
					onval
					:val="barCode"
					:load-make="true"
					:opations="barOpations"/>
				<view class="register-detail-component-text">
					{{barCode}}
				</view>
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="register-detail-see-doctor">
			<u-section title="就诊信息" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
			<view class="card">
				<view class="main flexC">
					<view class="row"> <text>就&nbsp;&nbsp;诊&nbsp;人：</text>{{params.hzxm||userInfo.name}} </view>
					<view class="row"> <text>就诊序号：</text>{{params.yyhx}} </view>
					<view class="row"> <text>科&emsp;&emsp;室：</text>{{params.ksmc}} </view>
					<view class="row"> <text>专&emsp;&emsp;家：</text>{{params.ysmc}} </view>
					<view class="row"> <text>就诊日期：</text>{{params.ghrq}} </view>
					<view class="row" v-if="params.jzdz"> <text>就诊地址：</text>{{params.jzdz}} </view>
				</view>
			</view>
		</view>
		<view class="div-cut" v-if="params.paymoney"></view>
		<view class="register-detail-pay" v-if="params.paymoney">
			<u-section title="缴费信息" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
			<view class="card">
				<view class="main flexC">
					<view class="row"> <text>交易金额：</text>{{params.paymoney}} </view>
					<view class="row"> <text>医院名称：</text>{{hospitalInfo.name}} </view>
					<view class="row"> <text>医院单号：</text>{{params.jssjh}} </view>
					<view class="row"> <text>流&nbsp;&nbsp;水&nbsp;号：</text>{{params.paylsh}} </view>
					<view class="row"> <text>支付状态：</text>{{transName(params.zfzt)}} </view>
				</view>
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="register-detail-btn">
			<view class="register-detail-pay-btn" v-if="params.jlzt==='0'">
				<view class="theme-light-btn" @click="toPage">去支付</view>
			</view>
			<view class="wriht-btn" v-if="params.jlzt==='0'">
				<view class="theme-fff-btn" @click="handleCancel(1)">取消预约</view>
			</view>
			<view class="wriht-btn" v-if="params.jlzt==='3'">
				<view class="theme-fff-btn" @click="handleCancel(2)">取消挂号</view>
			</view>
		</view>
		<u-modal v-model="showConfirm" @confirm="confirm" :async-close="true" :content='content' show-cancel-button :confirm-color='themeColor'></u-modal>
		<Load :load="load" />
	</view>
</template>

<script>
	import tkiBarcode from '@/components/BarCode/tki-barcode.vue'
	import { themeColorLight, themeColor } from '@/static/js/theme.js'
	import { mapGetters } from 'vuex'
	import { cancelAppointment, cancelRegister } from '@/api/register.js'
	import Load from '@/components/Load/index.vue'
	export default {
		components:{ tkiBarcode, Load },
		data() {
			return {
				themeColorLight,
				params:'', //上级带的参数
				load:false,
				showConfirm:false,
				content:'您确定继续操作？',
				type:'',
				barOpations:{
					displayValue:false
				}
			}
		},
		computed:{
			...mapGetters(['userInfo', 'hospitalInfo']),
			barCode(){
				if(this.userInfo.medicalRecordNumber){
					return this.userInfo.medicalRecordNumber
				}else{
					return ''
				}
			}
		},
		onLoad(op) {
			if(op.params){
				this.params = JSON.parse(op.params)
			}
		},
		filters:{
			transStatus(val){
				if(val==='0'){
					return '已预约成功'
				}else if(val==='1'){
					return '正在就诊中'
				}else if(val==='2'){
					return '已退号成功'
				}else if(val==='3'){
					return '预约挂号成功'
				}else if(val==='4'){
					return '已就诊结束'
				}else{
					return ''
				}
			},
			transStatusName(val){
				if(val==='0'){
					return '已预约成功，请您尽快完成支付锁定号源，避免号源丢失。'
				}else if(val==='1'){
					return '正在就诊中，请耐心等候。'
				}else if(val==='2'){
					return '已成功退号，如需重新挂号，请在首页选择医生或科室挂号重新进行预约挂号。'
				}else if(val==='3'){
					return '预约挂号成功，您可直接凭缴费成功的页面在挂号医生处就诊。如需发票，请到缴费窗口进行补打，请提前到医院就诊，过号需重排。'
				}else if(val==='4'){
					return '已完成就诊，祝您健康。'
				}else{
					return ''
				}
			}
		},
		methods: {
			transName(val){
				if(this.params){
					if(this.params.jlzt==='0'){
						if(val==1){
							return '已支付'
						}else{
							return '未支付'
						}
					}else{
						switch(this.params.jlzt){
							case '1':return '已支付';
							case '2':return '已退款';
							case '3':return '已支付';
							case '4':return '已支付';
							default: return''
						}
					}
				}else{
					return ''
				}
			},
			toPage(){
				let res = {
					ksmc:this.params.ksmc,
					ksdm:this.params.ksdm,
					ysmc:this.params.ysmc,
					ysdm:this.params.ysdm,
					ghrq:this.params.ghrq,
					pbmxid:this.params.pbmxxh,
					yyxh:this.params.yyxh,
					yyhx:this.params.yyhx,
					patId:this.userInfo.patId,
					ghf:this.params.ghf,
					zlf:this.params.zlf
				}
				uni.redirectTo({
					url:'/pages/Pay/registerPay?yyzt=1&params=' + JSON.stringify(res)
				})
			},
			handleCancel(type){
				this.type = type
				if(type===1){ //取消预约
					this.content='取消预约该号源将不在锁定，确定取消预约？'
				}else{
					this.content='退号您将会失去该号源，确定取消挂号？'
				}
				this.showConfirm = true
			},
			confirm(){
				if(this.type===1){
					this.cancleApp(flag => {
						this.showConfirm = false
						if(flag){
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							beforePage.$vm.initData(); // 执行前一个页面的刷新
							uni.navigateBack({
								delta: 1//1表示返回上一页
							});
						}
					})
				}else{
					this.cancleRe( flag => {
						this.showConfirm = false
						if(flag){
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 前一个页面
							beforePage.$vm.initData(); // 执行前一个页面的刷新
							uni.navigateBack({
								delta: 1//1表示返回上一页
							});
						}
					})
				}
			},
			cancleApp(cal){
				this.load = true
				let params = {
					ghrq:this.params.ghrq,
					patId:this.userInfo.patId,
					yyxh:this.params.yyxh
				}
				cancelAppointment(params).then(data => {
					this.load = false
					this.$u.toast('取消预约成功')
					cal(true)
				}).catch(e => {
					this.load = false
					cal(false)
				})
			},
			cancleRe(cal){
				this.load = true
				let params = {
					ghxh:this.params.ghxh,
					payMoney:this.params.paymoney,
					paylsh:this.params.paylsh,
					sjh:this.params.jssjh,
					patId:this.userInfo.patId
				}
				cancelRegister(params).then(data => {
					this.load = false
					this.$u.toast('取消挂号成功')
					cal(true)
				}).catch(e => {
					this.load = false
					cal(false)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-detail{
		min-height: calc(100vh);
		background-color: #FFF;
		.register-detail-header{
			background-color: $theme-color;
			background-image: url(../../../static/images/bg-header/register_detail_header.png);
			background-size: cover;
			height: 252rpx;
			color: #FFFFFF;
			padding: 0 30rpx;
			.register-detail-title{
				padding-top: 24rpx;
				font-size: 34rpx;
				justify-content: center;
				align-items: center;
				.icon{
					border: 2px solid $text-color-fff;
					border-radius: 50%;
					line-height: 60rpx;
					height: 60rpx;
					width: 60rpx;
					text-align: center;
					margin-right: 16rpx;
				}
				margin-bottom: 20rpx;
			}
			>.font12{
				line-height: 30rpx;
			}
		}
		.register-detail-code{
			background-color: $uni-bg-color;
			padding: 20rpx 30rpx;
			.register-detail-component-code{
				padding: 30rpx 0;
			}
			.register-detail-component-text{
				text-align: center;
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: 700;
			}
		}
		.register-detail-see-doctor,.register-detail-pay{
			background-color: $uni-bg-color;
			padding: 20rpx 30rpx;
			.card .main{
				padding-left: 0;
				padding-right: 0;
				align-items: flex-start;
				>.row{
					>text{
						width: 160rpx;
					}
				}
			}
		}
		.register-detail-btn{
			padding: 40rpx 30rpx 70rpx 30rpx;
			background-color: $uni-bg-color;
			.register-detail-pay-btn{
				margin-bottom: 20rpx;
				height: 90rpx;
			}
			.wriht-btn{
				height: 90rpx;
			}
		}
	}
</style>
<style lang="scss">
	.register-detail-component-code{
		.tki-barcode{
			image{
				width: 100%;
				height: 60px !important;
			}
		}
	}
</style>